<template>
  <div>
  <div>
    <head-vue></head-vue>
  </div>

    <div style="border-right: 1px solid #f0f0f0;width: 10%;height:93.5%;position:fixed;left: 0;top: 3.74rem;" >
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item  title=" 店内商品 " name="1"  class="han">

          <div id="menu-1" class="m-active" @click="menu1()">
            <i class="bi bi-search ml-4"></i> 商品管理
          </div>
            <div id="menu-2" class="" @click="menu2()">
              <i class="bi bi-search ml-4"></i> 分类管理
            </div>

        </el-collapse-item>
        <el-collapse-item title=" 商品扩展" name="2"  class="han">
          <div id="menu-3" class="" @click="menu3()">
            <i class="bi bi-search ml-4"></i> 规格库
          </div>
          <div id="menu-4" class="" @click="menu4()">
            <i class="bi bi-search ml-4"></i> 属性库
          </div>
        </el-collapse-item>

      </el-collapse>
    </div>
      <ProductList id="ProductList"></ProductList>
      <GoodsType id="GoodsType" v-show="flag"  ></GoodsType>
      <GoodsExtend id="GoodsExtend" v-show="flag2"></GoodsExtend>
      <GoodsAttribute id="GoodsAttribute" v-show="flag3" ></GoodsAttribute>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        activeNames: ['1'],
        flag:false,
        flag2:false,
        flag3:false
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      menu1(){
        $("#menu-1").attr("class","m-active")
        $("#menu-2").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#ProductList").fadeIn(300)
        $("#GoodsType").hide()
        $("#GoodsExtend").hide()
        $("#GoodsAttribute").hide()
      },
      menu2(){
        $("#menu-1").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#menu-2").attr("class","m-active")
        $("#GoodsType").fadeIn(300)
        $("#ProductList").hide()
        $("#GoodsExtend").hide()
        $("#GoodsAttribute").hide()
        this.flag = true;

      },
      menu3(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class"," ")
        $("#menu-4").attr("class"," ")
        $("#menu-3").attr("class","m-active")
        $("#GoodsExtend").fadeIn(300)
        $("#ProductList").hide()
        $("#GoodsType").hide()
        $("#GoodsAttribute").hide()
        this.flag2 = true;

      },
      menu4(){
        $("#menu-1").attr("class"," ")
        $("#menu-2").attr("class"," ")
        $("#menu-3").attr("class"," ")
        $("#menu-4").attr("class","m-active")
        $("#GoodsAttribute").fadeIn(300)
        $("#ProductList").hide()
        $("#GoodsType").hide()
        $("#GoodsExtend").hide()
        this.flag3 = true;

      }
    }

  }
</script>

<style scoped>
.han div{
  height: 3rem;
  line-height: 2.9rem;
}
li{
  list-style: none;
  /*background-color: #F0FAFF;*/
  cursor: pointer;
  height: 3rem;
  line-height: 2.9rem;
}
ul{
  padding: 0;
}
.m-active{
  background-color: #F0FAFF;
  border-right: 2px solid #2D8CF0;
}
</style>
